import Vue from 'vue'
import VueRouter from 'vue-router'

// import Login from './../components/Login.vue'
const Login = () => import(/* webpackChunkName: "login_hone_welcome" */ './../components/Login.vue')
// import Home from './../components/Home.vue'
const Home = () => import(/* webpackChunkName: "login_hone_welcome" */ './../components/Home.vue')
// import Welcome from './../components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName: "login_hone_welcome" */ './../components/Welcome.vue')

// import Users from './../components/user/Users.vue'
const Users = () => import(/* webpackChunkName: "user" */ './../components/user/Users.vue')

// import Rights from './../components/power/Rights.vue'
const Rights = () => import(/* webpackChunkName: "power" */ './../components/power/Rights.vue')
// import Roles from './../components/power/Roles.vue'
const Roles = () => import(/* webpackChunkName: "power" */ './../components/power/Roles.vue')

// import Cate from './../components/goods/Cate.vue'
const Cate = () => import(/* webpackChunkName: "goods" */ './../components/goods/Cate.vue')
// import Params from './../components/goods/Params.vue'
const Params = () => import(/* webpackChunkName: "goods" */ './../components/goods/Params.vue')
// import GoodsList from './../components/goods/List.vue'
const GoodsList = () => import(/* webpackChunkName: "goods" */ './../components/goods/List.vue')
// import Add from './../components/goods/Add.vue'
const Add = () => import(/* webpackChunkName: "goods" */ './../components/goods/Add.vue')

// import Order from './../components/order/Order.vue'
const Order  = () => import(/* webpackChunkName: "order" */ './../components/order/Order.vue')

// import Report from './../components/report/Report.vue'
const Report = () => import(/* webpackChunkName: "report" */ './../components/report/Report.vue')

Vue.use(VueRouter)

const routes = [{
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [{
      path: '/welcome',
      component: Welcome
    },{
      path: '/users',
      component: Users
    },{
      path: '/rights',
      component: Rights
    },{
      path: '/roles',
      component: Roles
    },{
      path: '/categories',
      component: Cate
    },{
      path: '/params',
      component: Params
    },{
      path: '/goods',
      component: GoodsList
    },{
      path: '/goods/add',
      component: Add
    },{
      path: '/orders',
      component: Order
    },{
      path: '/reports',
      component: Report
    }]
  }
]

const router = new VueRouter({
  mode: 'history', //新添加的一行
  routes
})

//路由導航守衛控制訪問權限
//如果用戶沒有登錄，但是直接通過url訪問特定頁面，需要重新導航到登錄頁面
router.beforeEach((to, from, next) => {
  //to 將要訪問的路徑
  //from 代表從哪個路徑跳轉而來
  //next 是個函數，代表放行
  // next() 放行，  next('login') 強制跳轉

  if (to.path === '/login') return next();
  //獲取token
  const token = window.sessionStorage.getItem('token');
  if (!token) return next('/login');
  next()
})

export default router
